<extend name="public@base"/>
<block name="head">
<title>{$category.name}</title>
<style>
    .bgImgText {
        position: absolute;
        color: white;
        text-align: center;
        top: 60%;
        left: 0px;
        right: 0px;
        font-size: 70px;
        line-height: 70px;
        font-weight: bold;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .9);
    }
    .photoBottom {
        color: white;
    }
    .photoBottom .row {
        text-align: center;
    }
    .photoBottom .item1 {
        font-size: 26px;
        font-weight: bold;
    }
    .photoBottom .item2 {
        font-size: 18px;
    }
    .photoBottom a {
        color: skyblue;
        text-decoration: underline;
    }
    .photoBottom a:hover, .photoBottom a:active {
        opacity: .8;
    }
    .photoBottom .item3 {
        width: 90%;
        text-align: left;
        margin: 0 auto;
    }
</style>
</block>
<block name="body">
        <!-- 幻灯片 -->
        <div>
            <php>
                $photo_slide_id=empty($theme_vars['photo_slide'])?0:$theme_vars['photo_slide'];
            </php>
            <slides id="$photo_slide_id">
                <div class="container" style="position: relative;">
                    <a href="{$vo.url|default=''}"><img src="{:cmf_get_image_url($vo.image)}" alt="{$vo.title|default=''}" title="{$vo.title|default=''}" style="width: 100%;user-select: none;"></a>
                    <!-- <p class="bgImgText">GET IN TOUCH</p> -->
                </div>
            </slides>
            <noslides id="$photo_slide_id">
                <div class="container" style="position: relative;">
                    <a href="__ROOT__"><img src="__TMPL__/public/assets/img/bgboat.png" alt="This slide is just a demonstration, you have not set any slides, please go to the background template settings!" title="This slide is just a demonstration, you have not set any slides, please go to the background template settings!" style="width: 100%;user-select: none;"></a>
                    <!-- <p class="bgImgText">GET IN TOUCH</p> -->
                </div>
            </noslides>
        </div>
        
        <!-- Photo -->
        <section class="latest-news pt-100 pb-180 white-bg" style="padding-top: 30px;padding-bottom: 40px;">
            <portal:articles order="post.create_time DESC" page="theme_vars.page_count" relation="categories" categoryIds="$category.id">
                <div class="container">
                    <h3 class="specialTitle">{$vo.post_title}</h3>

                    <!-- The Line -->
                    <div class="hrLine" style="background: #9e9e9e;"></div>

                    <div class="row" style="padding-top: 30px;">
                        <foreach name="vo.more.photos" item="st" key="i">
                            <div class="col-md-6 col-lg-4">
                                <div class="single-blog-post">
                                    <a href="javascript:;">
                                        <img src="{$st.url|default='__TMPL__/public/assets/img/indexpackage.png'|cmf_get_image_url}" alt="PHOTO GALLERY">
                                    </a>
                                </div>
                            </div>
                        </foreach>
                    </div>
                </div>
            </portal:articles>
        </section>
        <!-- End Photo -->
        <!-- Bottom -->
        <section class="photoBottom" style="background: black;padding: 20px 0px;">
            <div class="container">
                <div class="row">
                    <div class="col-md-6 col-lg-4">
                        <div class="item1">
                            <div>High Spirit </div>
                            <div>
                                <img src="__TMPL__/public/assets/img/photoboat.png" alt="boat">
                            </div>
                            <div>Charter</div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="item2">
                            <div style="padding-top: 10%;">
                                <span>Contact Us: </span>
                                <span>
                                    <a href="javascript:;">902-111-1234</a>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="item3">
                            <form id="photoForm">
                                <div style="font-style: italic;color: #888;font-size: 20px;">NEWSLETTER SIGNUP - STAY UP TO DATE</div>
                                <div>
                                    <div class="form-group">
                                        <span class="formLable" style="font-style: italic;color: #aaa;font-size: 14px;">Email address</span>
                                        <input type="text" class="form-control" id="emailAddress" placeholder="YOUR EMAIL ADDRESS" style="height: 40px;">
                                    </div>
                                    <button id="signUp" class="btn default-btn mt-10" style="margin-top: 0px;">Sign up</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Bottom -->
</block>